<!--
 * @Author: 'hongjilin' '1044580210@qq.com'
 * @Date: 2022-08-29 11:05:02
 * @LastEditors: 'hongjilin' '1044580210@qq.com'
 * @LastEditTime: 2022-09-03 16:25:06
 * @FilePath: \插件开发\src\views\components\item-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="item-list-box">
    <div
      class="clip-item"
      v-for="(item, index) in lists"
      :key="item.createTime"
      :class="{ active: activeIndex===index,activeBatch:(selectActiveIds.indexOf(item.id)!=-1) }"
      @click.left="handleItemClick($event, item)"
      @click.right="handleItemClick($event, item)"
      @mouseover="handleMouseOver(index)"
    >
      <!-- 列表前面时间部分 -->
      <div class="clip-item-time">
        <span>{{formatDateToString(item.updateTime)}}</span>
      </div>
      <!-- 列表内容部分 -->
      <div class="clip-item-info">
        <div class="clip-item-info-data">
          <template v-if="item.type === 'text'">
            <div
              class="clip-item-info-data-text"
            >{{ item.data.split(`\n`).slice(0, 8).join(`\n`).trim() }}</div>
            <div
              class="btn-show-detail clip-item-info-data-text"
              v-if="item.data.split(`\n`).length>8"
              @click.stop="()=>showDetails(item)"
            >查看全部>>></div>
          </template>
          <template v-if="item.type === 'image'">
            <img class="clip-item-info-data-img" :src="item.data" alt="Image" />
          </template>
          <template v-if="item.type === 'file'">
            <item-list-file @show-details="showDetails" :info="item"></item-list-file>
          </template>
        </div>
      </div>
    </div>
    <footer-tools
      @handle-go-top="handleGoToTop"
      @batch-delete="batchDelete"
      @batch-collector="batchCollector"
      @clear-store="clearStore"
      :showbatch="selectActiveIds.length>0"
    ></footer-tools>
  </div>
</template>

<script>
const formatDateToString = window.formatDateToString
module.exports = {
  components: {
    ItemListFile: httpVueLoader('./item-list-file.vue'),
    FooterTools: httpVueLoader('../commons/footer-tools.vue'),
  },
  props: {
    lists: {
      type: Array,
      default: () => []
    },
    dblists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0,//默认选中列表第一位
      selectActiveIds: [],
      ss: 'ssssss重新出现在重新注册自行车'
    }

  },
  mounted() {
    console.log(formatDateToString(new Date().getTime()), "utilsutilsutilsutilsutilsutils")
    this.initAddEventListenerKey()
    //初始化时聚焦
    window.focus()
  },
  watch: {
    lists: {
      handler(val) {
        console.log("列表刷新！！！！！！！！！！！！！！！！！！！！！！！！！！！", val)
      },
      deep:true
    }
  },
  methods: {

    //批量删除
    batchDelete() {
      const temp = []
      console.log("批量删除的函数！！！！！！！！！！！！！！！！！",this.dblists)
      this.dblists.map(item => {
        if (this.selectActiveIds.indexOf(item.id) == -1) temp.push(item)
      })
      // this.lists = temp
      console.log("批量删除的函数11！！！！！！！！！！！！！！！！！", temp)
      this.selectActiveIds = []
      window.DB.dataBase.data=temp
      this.$emit('init-db-lists')
      window.DB.updateDataBaseOnlyData(temp)
    },
    //批量收藏
    batchCollector() {
      const temp = []
      this.lists.map(item => {
        if (this.selectActiveIds.indexOf(item.id) != -1) temp.push(item)
      })
      const collectors = window.DB.dataBase.collectors || []
      const tempArr = [...temp, ...collectors,]
      for (let i = 0; i < tempArr.length; i++) {
        for (let j = i + 1; j < tempArr.length; j++) {
          if (tempArr[i].id == tempArr[j].id) {
            tempArr.splice(j, 1);
            j--;
          };
        };
      }
      this.selectActiveIds = []
      window.DB.updateDataBaseOnlyCollectors(tempArr)
    },
    //展示当前记录的详情页面
    showDetails(item) {
      this.$emit('show-details', item)
    },
    //定位当前的下标，并将其定位到界面中间
    checkActiveInCenter() {
      //为什么需要用$nextTick？  --因为vue监听数据变化并不是同步马上进行的，所以需要等这次dom渲染结束后再去进行下面的跳转操作
      this.$nextTick(() => {
        //再将当前下标数据置于界面中间
        document.querySelector('.clip-item.active') && document.querySelector('.clip-item.active').scrollIntoView({
          block: 'nearest',
          inline: 'nearest'
        })
      })
    },

    //添加监听键盘事件，同时将记录当前按下的键位 
    initAddEventListenerKey() {
      document.addEventListener('keydown', (e) => {
        const { key, ctrlKey, metaKey, altKey } = e
        console.log(key, "yyyyyyyyyyyyyy")
        //当前是否按下ctrl，存到全局中，因为多处地方会调用文件列表，所以不可以直接用父子组件传，不然耦合性太高
        window.isCtrlKey = ctrlKey || metaKey
        switch (key) {
          //当你按下键盘【↑】
          case 'ArrowUp': {
            if (this.activeIndex > 0) this.activeIndex-- //如果当前下标为0了，就不再对其进行【↑】的相关操作
            else if (this.activeIndex === 1) window.toTop() //如果当前下标为1，直接对其进行置顶操作
            else {
              //如果其他情况，就将当前选中激活的元素置于页面中间
              this.checkActiveInCenter()
            }
            break;
          }
          //当你按下了键盘【↓】
          case 'ArrowDown': {
            //要保证不能超过list长度
            if (this.activeIndex < this.lists.length - 1) {
              this.activeIndex++
              //将当前选中激活的元素置于页面中间
              this.checkActiveInCenter()
            }
            break;
          }
          //当你按下了回车键【Enter】
          case 'Enter': {
            //当你按下了回车键，按照当前的下标查找到对应的剪切板数据，同时粘贴到页面上
            window.copy(this.lists[this.activeIndex])
            window.paste()
            break;
          }
          //当你按下了【Shift】
          case 'Shift': {
            window.isShift = true
            break;
          }
          //当你按下了【Alt】
          case 'Alt': {
            console.log('anxialeAlt')
            window.Alt = true
            break;
          }
        }

      })
      //添加键盘抬起事件的监听，如果抬起键盘的时候要将原本的按钮标识还原
      document.addEventListener('keyup', (e) => {
        //只要键盘抬起，就要重置按钮标识
        window.isCtrlKey = false
        window.isShift = false
        window.Alt = false
        this.selectActiveIds = []
      })
    },
    //回到顶部
    handleGoToTop() {
      this.activeIndex = 0
      //定位当前下标，同时将页面滚动到最上方
      document.scrollingElement.scrollTop = 0
    },
    //清空存储的数据
    clearStore() {
      //要先询问用户
      const flag = window.confirm('确定要清空剪贴板记录吗?')
      if (flag) {
        //如果用户确认后，调用封装好的清空数据库方法
        this.$emit('clear-store')
      }
    },
    //鼠标移入移出事件
    handleMouseOver(index) {
      //移入时将index下标赋值到data中，用以渲染当前选中项样式
      this.activeIndex = index
    },
    //鼠标点击事件，左键点击复制+粘贴，右键只有复制
    handleItemClick(ev, item) {
      const { button } = ev
      const temps = this.selectActiveIds
      if (window.isCtrlKey) {
        //如果没有的直接添加
        if (temps.length == 1) {
          this.selectActiveIds.push(item.id)
          return
        }
        //判断当前传入项是否重复
        let repeatFlag = false
        temps.map(active => {
          if (active === item.id) { repeatFlag = true }
        })
        //如果重复，就直接筛选掉
        if (repeatFlag) {
          this.selectActiveIds = temps.filter(activeId => activeId !== item.id)
        }
        //如果不重复，就添加
        else {
          this.selectActiveIds.push(item.id)
        }
        return
      }
      if (button === 0) {
        // 左键 复制后粘贴
        window.copy(item)
        window.paste()
      } else if (button === 2) {
        // 右键 仅复制
        window.copy(item)
      }
    }
  }

}
</script>
